<template>
	<view style="text-align: center;">
	    <view style="margin-top: 100px;">
	      <image
	        :src="iconFilePath" 
	        @click="updateImage()" 
	        mode="aspectFill"
	        class="preview-image"
	      ></image>
	    </view>
			<!-- <image :src="iconFilePath" @click="updateImage()" mode="aspectFill"></image> -->
		<view>
			<button @click="updateImage()">选择图片显示</button>
			<button @click="previewImage(chooseImages)">预览图片</button>
			<button @click="showImageInfo">获取图片信息</button>
		    <button @click="downloadNetworkImage">下载网络图片</button>
		    <image :src="downloadedImagePath" mode="aspectFill" style="width: 300rpx; height: 300rpx; margin-top: 20rpx;"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iconFilePath:"/static/logo.png",
				chooseImages:[],
				imageInfo: null,
				downloadedImagePath: ""
			}
		},
		methods: {
			updateImage() {
			  uni.chooseImage({
			    count:3,
			    sourceType: ['album'],
			    success: (res) => {
			      console.log("updateImage choose:" + res.tempFilePaths[0]);
			      this.iconFilePath = res.tempFilePaths[0];
			      this.chooseImages = res.tempFilePaths;
			      uni.getImageInfo({
			        src: res.tempFilePaths[0],
			        success: (image) => {
			          console.log("图片信息：", image);
			          this.imageInfo = {
			            width: image.width,
			            height: image.height,
			            type: image.type,
			            size: image.size,
			            path: image.path
			          };
			        },
			        fail: (err) => {
			          console.error("获取图片信息失败：", err);
			          uni.showToast({ title: '获取图片信息失败', icon: 'none' });
			        }
			      });
			    }
			  });
			},
			previewImage(images){
				uni.previewImage({
					urls:images
				})
			},
			 showImageInfo() {
			        if (!this.imageInfo) {
			          uni.showToast({ title: '请先选择图片', icon: 'none' });
			          return;
			        }
			        const infoText = `宽：${this.imageInfo.width}px，高：${this.imageInfo.height}px，格式：${this.imageInfo.type}，大小：${(this.imageInfo.size / 1024).toFixed(2)}KB`;
			        uni.showModal({ title: '图片信息', content: infoText, showCancel: false });
			      },
				  downloadNetworkImage() {
				    const imageUrl = "https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg";
				    const downloadTask = uni.downloadFile({
				      url: imageUrl,
				      success: (res) => {
				        if (res.statusCode === 200) {
				          console.log("图片下载成功，临时路径：", res.tempFilePath);
				          this.downloadedImagePath = res.tempFilePath;
				          // 可选：预览下载的图片
				          uni.previewImage({ urls: [res.tempFilePath] });
				        } else {
				          uni.showToast({ title: "图片下载失败", icon: "none" });
				        }
				      },
				      fail: (err) => {
				        console.error("图片下载失败：", err);
				        uni.showToast({ title: "图片下载失败", icon: "none" });
				      },
				    });
				  
				    // 监听下载进度并打印Log
				    downloadTask.onProgressUpdate((res) => {
				      console.log("下载进度：", res.progress + "%");
				      console.log("已下载字节数：", res.totalBytesWritten);
				      console.log("预计总字节数：", res.totalBytesExpectedToWrite);
				    });
				  }
		}
	}
</script>

<style>
button{
	margin: 20rpx;
}
</style>